import svgPaths from "./svg-5qwtoklvem";
import imgFrame388 from "figma:asset/52d3cdb8bbf6a508907a478fc7883ef22c4f4d97.png";
import imgRectangle7 from "figma:asset/76697018d798b4ef1e868f6551fd6cd31e8d44ae.png";
import imgRectangle8 from "figma:asset/e8a12ee6bedfbbf51dbcb3adf0bc8c4cd55f5a4f.png";
import imgImage7 from "figma:asset/71b6f4b4781406753cbded219d5fa3c5d9a283d0.png";
import imgRectangle16 from "figma:asset/fa0b038636e50f8de4f1ff0b3d3ba3b0ff5c2f39.png";

function Frame94() {
  return <div className="absolute backdrop-blur-[35px] backdrop-filter bg-gradient-to-t from-[66.346%] from-[rgba(29,21,21,0.2)] h-[706px] left-0 to-[rgba(29,21,21,0)] top-[8721px] w-[1440px]" />;
}

function SvgSkeneLogo() {
  return (
    <div className="absolute left-0 size-[23.223px] top-[calc(50%+0.01px)] translate-y-[-50%]" data-name="SVG - Skene Logo">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="SVG - Skene Logo">
          <path d={svgPaths.p34c55100} id="Vector" stroke="var(--stroke-0, #EBDCCF)" strokeLinecap="round" strokeWidth="1.81501" />
          <path d="M2.32031 16.2547V11.6094" id="Vector_2" stroke="var(--stroke-0, #EBDCCF)" strokeLinecap="round" strokeWidth="1.81501" />
          <path d={svgPaths.p6cbb380} fill="var(--fill-0, #EBDCCF)" id="Vector_3" />
          <path d={svgPaths.p5123200} fill="var(--fill-0, #EBDCCF)" id="Vector_4" />
          <path d={svgPaths.p29595d20} fill="var(--fill-0, #EBDCCF)" id="Vector_5" />
        </g>
      </svg>
    </div>
  );
}

function Link() {
  return (
    <div className="h-[25.41px] relative shrink-0 w-[82.211px]" data-name="Link">
      <SvgSkeneLogo />
      <div className="absolute flex flex-col font-['Inter:Semi_Bold',sans-serif] font-semibold h-[25.41px] justify-center leading-[0] left-[29.03px] not-italic text-[#ebdccf] text-[17.424px] top-[12.71px] translate-y-[-50%] w-[53.37px]">
        <p className="leading-[25.41px]">Skene</p>
      </div>
    </div>
  );
}

function Nav() {
  return (
    <div className="content-stretch flex font-['Geist_Mono:Medium',sans-serif] font-medium gap-[40px] items-center leading-[0] relative shrink-0 text-[#ebdccf] text-[14px] text-nowrap" data-name="Nav">
      <div className="flex flex-col justify-center relative shrink-0">
        <p className="leading-[20px] text-nowrap">Home</p>
      </div>
      <div className="flex flex-col justify-center relative shrink-0">
        <p className="leading-[20px] text-nowrap">How it works</p>
      </div>
      <div className="flex flex-col justify-center relative shrink-0">
        <p className="leading-[20px] text-nowrap">Pricing</p>
      </div>
      <div className="flex flex-col justify-center relative shrink-0">
        <p className="leading-[20px] text-nowrap">Login</p>
      </div>
    </div>
  );
}

function Frame65() {
  return (
    <div className="bg-[#edc29c] content-stretch flex items-center justify-center pb-[8px] pt-[7px] px-[16px] relative rounded-[8px] shrink-0">
      <div className="flex flex-col font-['Geist_Mono:Medium',sans-serif] font-medium justify-center leading-[0] relative shrink-0 text-[12px] text-black text-nowrap">
        <p className="leading-[20px]">Sign up</p>
      </div>
    </div>
  );
}

function Nav1() {
  return (
    <div className="content-stretch flex items-center relative shrink-0" data-name="Nav">
      <Frame65 />
    </div>
  );
}

function Frame67() {
  return (
    <div className="content-stretch flex gap-[23px] items-center relative shrink-0">
      <Nav />
      <Nav1 />
    </div>
  );
}

function Frame68() {
  return (
    <div className="content-stretch flex items-center justify-between relative shrink-0 w-full">
      <Link />
      <Frame67 />
    </div>
  );
}

function Frame69() {
  return (
    <div className="absolute content-stretch flex flex-col h-[69px] items-start left-0 pb-[10px] pt-[20px] px-[40px] top-0 w-[1440px]">
      <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={imgFrame388} />
      <Frame68 />
    </div>
  );
}

function OverlayHorizontalBorderOverlayBlur() {
  return (
    <div className="absolute border-[0px_0px_0.905px] border-[rgba(255,255,255,0.1)] border-solid h-[48px] left-[-1px] right-[-1px] top-[-1px]" data-name="Overlay+HorizontalBorder+OverlayBlur">
      <div className="absolute flex flex-col font-['Inter:Regular',sans-serif] font-normal justify-center leading-[0] left-[187px] not-italic text-[#a1a1a1] text-[14px] text-nowrap top-[25.5px] translate-y-[-50%]">
        <p className="leading-[18.107px]">Chat</p>
      </div>
      <div className="absolute flex flex-col font-['Inter:Regular',sans-serif] font-normal justify-center leading-[0] left-[252px] not-italic text-[#a1a1a1] text-[14px] text-nowrap top-[25.5px] translate-y-[-50%]">
        <p className="leading-[18.107px]">Resources</p>
      </div>
      <div className="absolute flex flex-col font-['Inter:Regular',sans-serif] font-normal justify-center leading-[0] left-[23.17px] not-italic text-[#fafafa] text-[14px] text-nowrap top-[25.5px] translate-y-[-50%]">
        <p className="leading-[18.107px]">Onboarding journey</p>
      </div>
      <div className="absolute bg-[#e5e5e5] bottom-[-0.91px] h-px left-[4.27%] right-[71.43%]" data-name="Horizontal Divider" />
    </div>
  );
}

function OverlayShadow() {
  return <div className="absolute bg-[rgba(255,255,255,0)] left-[291.47px] rounded-[3.03783e+07px] shadow-[0px_0px_0px_1.811px_rgba(232,194,96,0.3)] size-[17.374px] top-[32.59px]" data-name="Overlay+Shadow" />;
}

function OverlayShadowOverlayBlur() {
  return (
    <div className="absolute h-[54.674px] left-[16.37px] overflow-clip right-[16.49px] rounded-[12.675px] top-[158.84px]" data-name="Overlay+Shadow+OverlayBlur">
      <div className="absolute flex flex-col font-['Inter:Regular',sans-serif] font-normal justify-center leading-[0] left-[2.63px] not-italic text-[#fafafa] text-[14px] text-nowrap top-[11.66px] translate-y-[-50%]">
        <p className="leading-[18.107px]">Onboarding Milestones</p>
      </div>
      <div className="absolute bg-[rgba(255,255,255,0.1)] h-[1.811px] left-[11.58px] right-[11.59px] top-[41.27px]" data-name="Horizontal Divider" />
      <div className="absolute bg-[#f5b276] h-[1.811px] left-[2.3%] right-[40.46%] top-[calc(50%+14.84px)] translate-y-[-50%]" data-name="Horizontal Divider" />
      <div className="absolute flex flex-col font-['Inter:Regular',sans-serif] font-normal h-[14.486px] justify-center leading-[0] left-[calc(50%-192.3px)] not-italic text-[#a1a1a1] text-[10.23px] text-center top-[calc(50%+38.55px)] translate-x-[-50%] translate-y-[-50%] w-[28.401px]">
        <p className="leading-[14.486px]">Setup</p>
      </div>
      <div className="absolute bg-[#f5b276] border-[1.811px] border-[rgba(255,255,255,0.1)] border-solid left-[55.33px] rounded-[3.03783e+07px] size-[8.682px] top-[36.94px]" data-name="Background+Border" />
      <div className="absolute flex flex-col font-['Inter:Regular',sans-serif] font-normal h-[14.486px] justify-center leading-[0] left-[calc(50%-72.06px)] not-italic text-[#a1a1a1] text-[10.683px] text-center top-[calc(50%+38.55px)] translate-x-[-50%] translate-y-[-50%] w-[28.6px]">
        <p className="leading-[14.486px]">Goals</p>
      </div>
      <div className="absolute bg-[#f5b276] border-[1.811px] border-[rgba(255,255,255,0.1)] border-solid left-[175.56px] rounded-[3.03783e+07px] size-[8.682px] top-[36.94px]" data-name="Background+Border" />
      <div className="absolute flex flex-col font-['Inter:Semi_Bold',sans-serif] font-semibold h-[14.486px] justify-center leading-[0] left-[calc(50%+48.19px)] not-italic text-[#f5b276] text-[10.683px] text-center top-[calc(50%+38.55px)] translate-x-[-50%] translate-y-[-50%] w-[43.23px]">
        <p className="leading-[14.486px]">Reviews</p>
      </div>
      <div className="absolute bg-[#f5b276] border-[1.811px] border-[rgba(255,255,255,0.1)] border-solid left-[295.81px] rounded-[3.03783e+07px] size-[8.682px] top-[36.94px]" data-name="Background+Border" />
      <OverlayShadow />
      <div className="absolute flex flex-col font-['Inter:Regular',sans-serif] font-normal h-[14.486px] justify-center leading-[0] left-[calc(50%+168.43px)] not-italic text-[#a1a1a1] text-[9.868px] text-center top-[calc(50%+38.55px)] translate-x-[-50%] translate-y-[-50%] w-[42.904px]">
        <p className="leading-[14.486px]">Adoption</p>
      </div>
      <div className="absolute bg-[#f5b276] border-[1.811px] border-[rgba(255,255,255,0.1)] border-solid left-[416.06px] rounded-[3.03783e+07px] size-[8.682px] top-[36.94px]" data-name="Background+Border" />
    </div>
  );
}

function Svg() {
  return (
    <div className="absolute left-[calc(50%-78.18px)] size-[14.486px] top-[42px] translate-x-[-50%]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 15 15">
        <g id="SVG">
          <path d={svgPaths.pab43300} fill="var(--fill-0, #E5E5E5)" fillOpacity="0.61" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Svg1() {
  return (
    <div className="absolute left-[calc(50%-60.8px)] size-[14.486px] top-[42px] translate-x-[-50%]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 15 15">
        <g id="SVG">
          <path d={svgPaths.p2716e80} fill="var(--fill-0, #E5E5E5)" fillOpacity="0.61" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Svg2() {
  return (
    <div className="absolute left-[calc(50%-43.43px)] size-[14.486px] top-[42px] translate-x-[-50%]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 15 15">
        <g id="SVG">
          <path d={svgPaths.p2c52ab00} fill="var(--fill-0, #E5E5E5)" fillOpacity="0.61" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Svg3() {
  return (
    <div className="absolute left-[calc(50%-26.05px)] size-[14.486px] top-[42px] translate-x-[-50%]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 15 15">
        <g id="SVG">
          <path d={svgPaths.p36ec0c80} fill="var(--fill-0, #E5E5E5)" fillOpacity="0.61" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Svg4() {
  return (
    <div className="absolute left-[calc(50%-8.69px)] size-[14.486px] top-[42px] translate-x-[-50%]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 15 15">
        <g id="SVG">
          <path d={svgPaths.pad45200} fill="var(--fill-0, #E5E5E5)" fillOpacity="0.61" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Svg5() {
  return (
    <div className="absolute left-[calc(50%+8.68px)] size-[14.486px] top-[42px] translate-x-[-50%]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 15 15">
        <g id="SVG">
          <path d={svgPaths.p23826100} fill="var(--fill-0, #E5E5E5)" fillOpacity="0.61" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Svg6() {
  return (
    <div className="absolute left-[calc(50%+26.06px)] size-[14.486px] top-[42px] translate-x-[-50%]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 15 15">
        <g id="SVG">
          <path d={svgPaths.p1b145b00} fill="var(--fill-0, #E5E5E5)" fillOpacity="0.61" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Svg7() {
  return (
    <div className="absolute left-[calc(50%+43.43px)] size-[14.486px] top-[42px] translate-x-[-50%]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 15 15">
        <g id="SVG">
          <path d={svgPaths.p1d8726f0} fill="var(--fill-0, #E5E5E5)" fillOpacity="0.61" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Svg8() {
  return (
    <div className="absolute left-[calc(50%+60.79px)] size-[14.486px] top-[42px] translate-x-[-50%]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 15 15">
        <g id="SVG">
          <path d={svgPaths.p13223d00} fill="var(--fill-0, #E5E5E5)" fillOpacity="0.61" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Svg9() {
  return (
    <div className="absolute left-[calc(50%+78.17px)] size-[14.486px] top-[42px] translate-x-[-50%]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 15 15">
        <g id="SVG">
          <path d={svgPaths.p26f45470} fill="var(--fill-0, #A1A1A1)" fillOpacity="0.3" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function BackgroundBorder() {
  return (
    <div className="absolute border-[0.905px] border-[rgba(255,255,255,0.1)] border-solid h-[69.884px] left-[16.38px] right-[16.49px] rounded-[12.675px] top-[271px]" data-name="Background+Border">
      <div className="absolute flex flex-col font-['Inter:Regular',sans-serif] font-normal h-[21.728px] justify-center leading-[0] left-[calc(50%+0.09px)] not-italic text-[#fafafa] text-[14.395px] text-center top-[22.45px] translate-x-[-50%] translate-y-[-50%] w-[297.107px]">
        <p className="leading-[21.728px]">How is your onboarding experience so far?</p>
      </div>
      <Svg />
      <Svg1 />
      <Svg2 />
      <Svg3 />
      <Svg4 />
      <Svg5 />
      <Svg6 />
      <Svg7 />
      <Svg8 />
      <Svg9 />
    </div>
  );
}

function BackgroundShadow() {
  return (
    <div className="absolute backdrop-blur-[18px] backdrop-filter border border-[#353535] border-solid h-[372px] left-[755px] overflow-clip rounded-[21.728px] top-1/2 translate-y-[-50%] w-[561px]" data-name="Background+Shadow" style={{ backgroundImage: "url('data:image/svg+xml;utf8,<svg viewBox=\\\'0 0 561 372\\\' xmlns=\\\'http://www.w3.org/2000/svg\\\' preserveAspectRatio=\\\'none\\\'><rect x=\\\'0\\\' y=\\\'0\\\' height=\\\'100%\\\' width=\\\'100%\\\' fill=\\\'url(%23grad)\\\' opacity=\\\'0.8500000238418579\\\'/><defs><radialGradient id=\\\'grad\\\' gradientUnits=\\\'userSpaceOnUse\\\' cx=\\\'0\\\' cy=\\\'0\\\' r=\\\'10\\\' gradientTransform=\\\'matrix(-2.4425e-13 -18.02 42.609 -1.9497e-8 285.82 -89.454)\\\'><stop stop-color=\\\'rgba(23,23,23,0.44314)\\\' offset=\\\'0\\\'/><stop stop-color=\\\'rgba(23,23,23,1)\\\' offset=\\\'0.98077\\\'/></radialGradient></defs></svg>')" }}>
      <OverlayHorizontalBorderOverlayBlur />
      <div className="absolute flex flex-col font-['Inter:Regular',sans-serif] font-normal h-[18.107px] justify-center leading-[0] left-[calc(50%+1.02px)] not-italic text-[#a1a1a1] text-[11.86px] text-center top-[80.09px] translate-x-[-50%] translate-y-[-50%] w-[94.518px]">
        <p className="leading-[18.107px]">Welcome to your</p>
      </div>
      <div className="absolute flex flex-col font-['Inter:Medium',sans-serif] font-medium h-[36px] justify-center leading-[0] left-[calc(50%+1.05px)] not-italic text-[#fafafa] text-[36px] text-center top-[107px] tracking-[-0.8148px] translate-x-[-50%] translate-y-[-50%] w-[279px]">
        <p className="leading-[36.214px]">Customer Hub</p>
      </div>
      <OverlayShadowOverlayBlur />
      <BackgroundBorder />
      <div className="absolute flex flex-col font-['Inter:Regular',sans-serif] font-normal justify-center leading-[0] left-[57px] not-italic text-[#6a6a6a] text-[12px] text-nowrap top-[227.5px] translate-y-[-50%]">
        <p className="leading-[18.107px]">Setup</p>
      </div>
      <div className="absolute flex flex-col font-['Inter:Regular',sans-serif] font-normal justify-center leading-[0] left-[194px] not-italic text-[#6a6a6a] text-[12px] text-center text-nowrap top-[227.5px] translate-x-[-50%] translate-y-[-50%]">
        <p className="leading-[18.107px]">Goals</p>
      </div>
      <div className="absolute flex flex-col font-['Inter:Regular',sans-serif] font-normal justify-center leading-[0] left-[316.5px] not-italic text-[#6a6a6a] text-[12px] text-center text-nowrap top-[227.5px] translate-x-[-50%] translate-y-[-50%]">
        <p className="leading-[18.107px]">Reviews</p>
      </div>
      <div className="absolute flex flex-col font-['Inter:Regular',sans-serif] font-normal justify-center leading-[0] left-[435px] not-italic text-[#6a6a6a] text-[12px] text-center text-nowrap top-[227.5px] translate-x-[-50%] translate-y-[-50%]">
        <p className="leading-[18.107px]">Adoption</p>
      </div>
    </div>
  );
}

function Frame72() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-[87px] px-[10px] py-[4px] rounded-[4px] top-[52px]">
      <div aria-hidden="true" className="absolute border border-[#a1a1a1] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#2c2c2c] text-[12px] text-nowrap tracking-[1.56px]">SKENE.AI</p>
    </div>
  );
}

function Frame73() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-[87px] px-[10px] py-[4px] rounded-[4px] top-[240px]">
      <div aria-hidden="true" className="absolute border border-[#2c2c2c] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#2c2c2c] text-[12px] text-nowrap tracking-[1.56px] uppercase">Connect</p>
    </div>
  );
}

function Frame74() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-[87px] px-[10px] py-[4px] rounded-[4px] top-[380px]">
      <div aria-hidden="true" className="absolute border border-[#2c2c2c] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#2c2c2c] text-[12px] text-nowrap tracking-[1.56px] uppercase">analyze</p>
    </div>
  );
}

function Frame75() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-[87px] px-[10px] py-[4px] rounded-[4px] top-[520px]">
      <div aria-hidden="true" className="absolute border border-[#2c2c2c] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#2c2c2c] text-[12px] text-nowrap tracking-[1.56px] uppercase">Generate</p>
    </div>
  );
}

function Frame76() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-[87px] px-[10px] py-[4px] rounded-[4px] top-[660px]">
      <div aria-hidden="true" className="absolute border border-[#2c2c2c] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#2c2c2c] text-[12px] text-nowrap tracking-[1.56px] uppercase">Monitor</p>
    </div>
  );
}

function Frame80() {
  return (
    <div className="absolute h-[828px] left-1/2 rounded-[16px] top-[3039px] translate-x-[-50%] w-[1376px]">
      <div className="absolute bg-[#faf1e9] h-[828px] left-0 rounded-[12px] top-0 w-[1376px]" />
      <div className="absolute flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center leading-[0] left-[calc(50%-601px)] text-[#060606] text-[48px] text-nowrap top-[117.5px] tracking-[-0.96px] translate-y-[-50%]">
        <p className="leading-[52.8px]">How it works</p>
      </div>
      <div className="absolute flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] left-[calc(50%-601px)] text-[#757171] text-[18px] text-nowrap top-[166.5px] translate-y-[-50%]">
        <p className="leading-[23px]">From codebase to product-led growth in four steps.</p>
      </div>
      <p className="absolute font-['Geist:Regular',sans-serif] font-normal leading-[19.6px] left-[207px] text-[#2c2c2c] text-[16px] top-[240px] w-[320px]">Skene links to GitHub, GitLab, or Bitbucket via read-only authorization. No code changes required.</p>
      <p className="absolute font-['Geist:Regular',sans-serif] font-normal leading-[19.6px] left-[207px] text-[#2c2c2c] text-[16px] top-[380px] w-[320px]">Skene parses code, APIs, configurations, and docs, processing 1M+ tokens to build a semantic understanding of your product.</p>
      <p className="absolute font-['Geist:Regular',sans-serif] font-normal leading-[19.6px] left-[207px] text-[#2c2c2c] text-[16px] top-[520px] w-[320px]">Skene creates role-specific journeys, interactive walkthroughs, and milestone tracking, automatically adapted to your architecture.</p>
      <p className="absolute font-['Geist:Regular',sans-serif] font-normal leading-[19.6px] left-[207px] text-[#2c2c2c] text-[16px] top-[660px] w-[320px]">Skene monitors your repository for changes and updates onboarding, retention mechanics, and analytics as you ship.</p>
      <div className="absolute h-[828px] left-[695px] pointer-events-none rounded-br-[12px] rounded-tr-[12px] top-0 w-[681px]">
        <div aria-hidden="true" className="absolute inset-0 rounded-br-[12px] rounded-tr-[12px]">
          <img alt="" className="absolute max-w-none object-50%-50% object-cover rounded-br-[12px] rounded-tr-[12px] size-full" src={imgRectangle7} />
          <img alt="" className="absolute max-w-none object-50%-50% object-cover rounded-br-[12px] rounded-tr-[12px] size-full" src={imgRectangle8} />
        </div>
        <div aria-hidden="true" className="absolute border border-[rgba(6,6,6,0.1)] border-solid inset-0 rounded-br-[12px] rounded-tr-[12px]" />
      </div>
      <BackgroundShadow />
      <div className="absolute h-0 left-[87px] top-[611px] w-[460px]">
        <div className="absolute inset-[-1px_0_0_0]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 460 1">
            <line id="Line 53" stroke="var(--stroke-0, #A1A1A1)" strokeOpacity="0.6" x2="460" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
      <div className="absolute h-0 left-[87px] top-[471px] w-[460px]">
        <div className="absolute inset-[-1px_0_0_0]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 460 1">
            <line id="Line 53" stroke="var(--stroke-0, #A1A1A1)" strokeOpacity="0.6" x2="460" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
      <div className="absolute h-0 left-[87px] top-[331px] w-[460px]">
        <div className="absolute inset-[-1px_0_0_0]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 460 1">
            <line id="Line 53" stroke="var(--stroke-0, #A1A1A1)" strokeOpacity="0.6" x2="460" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
      <Frame72 />
      <Frame73 />
      <Frame74 />
      <Frame75 />
      <Frame76 />
    </div>
  );
}

function Group2() {
  return (
    <div className="absolute contents left-0 top-0">
      <div className="absolute h-[754px] left-0 rounded-[12px] top-0 w-[1376px]" />
    </div>
  );
}

function Frame17() {
  return (
    <div className="content-stretch flex flex-col gap-[16px] items-center leading-[0] relative shrink-0 text-[#2c2c2c] text-center w-full">
      <div className="flex flex-col font-['Geist:Medium',sans-serif] font-medium h-[59px] justify-center relative shrink-0 text-[48px] tracking-[-0.96px] w-full">
        <p className="leading-[52.8px]">More than just onboarding</p>
      </div>
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal h-[15px] justify-center relative shrink-0 text-[18px] w-[580px]">
        <p className="leading-[23px]">Everything you need to reach PLG, without the overhead.</p>
      </div>
    </div>
  );
}

function Frame84() {
  return (
    <div className="bg-[#2c2c2c] content-stretch flex items-center justify-center px-[10px] py-[4px] relative rounded-[4px] shrink-0">
      <div aria-hidden="true" className="absolute border border-[#2c2c2c] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#faf1e9] text-[12px] text-nowrap tracking-[1.56px] uppercase">Success analytics</p>
    </div>
  );
}

function Frame29() {
  return (
    <div className="content-stretch flex flex-col items-start relative shrink-0 w-full">
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#060606] text-[16px] w-[351px]">
        <p className="leading-[21px]">{`Real-time visibility into what's working. Track completion rates, identify drop-off points, and measure time-to-activation. a flows based on data, not gut feeling.`}</p>
      </div>
    </div>
  );
}

function Frame27() {
  return (
    <div className="content-stretch flex flex-col items-start relative shrink-0 w-full">
      <Frame29 />
    </div>
  );
}

function Form() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[rgba(6,6,6,0.03)] content-stretch flex flex-col gap-[26px] h-[207px] items-start px-[40px] py-[38px] relative rounded-[12px] shrink-0 w-[471px]" data-name="Form">
      <Frame84 />
      <Frame27 />
    </div>
  );
}

function Frame89() {
  return (
    <div className="bg-[#2c2c2c] content-stretch flex items-center justify-center px-[10px] py-[4px] relative rounded-[4px] shrink-0">
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#faf1e9] text-[12px] text-nowrap tracking-[1.56px] uppercase">Lifecycle automation</p>
    </div>
  );
}

function Frame22() {
  return (
    <div className="content-stretch flex flex-col items-start relative shrink-0 w-full">
      <Frame89 />
    </div>
  );
}

function Frame34() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[rgba(6,6,6,0.03)] content-stretch flex flex-col gap-[26px] items-start px-[40px] py-[38px] relative rounded-[12px] shrink-0 w-[471px]">
      <Frame22 />
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#060606] text-[16px] w-[351px]">
        <p className="leading-[21px]">Automated customer journey management from first login to renewal. AI agents handle health scoring, engagement triggers, and proactive outreach at scale.</p>
      </div>
    </div>
  );
}

function Frame97() {
  return (
    <div className="bg-[#2c2c2c] content-stretch flex items-center justify-center px-[10px] py-[4px] relative rounded-[4px] shrink-0">
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#faf1e9] text-[12px] text-nowrap tracking-[1.56px] uppercase">Native integrations</p>
    </div>
  );
}

function Frame28() {
  return (
    <div className="content-stretch flex flex-col items-start relative shrink-0 w-full">
      <Frame97 />
    </div>
  );
}

function Frame30() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[rgba(6,6,6,0.03)] content-stretch flex flex-col gap-[26px] h-[207px] items-start px-[40px] py-[38px] relative rounded-[12px] shrink-0 w-[471px]">
      <Frame28 />
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#060606] text-[16px] w-[351px]">
        <p className="leading-[21px]">Works with your existing stack. Connects to Segment, Mixpanel, Intercom, Salesforce. No API changes or custom implementation required.</p>
      </div>
    </div>
  );
}

function Frame98() {
  return (
    <div className="bg-[#2c2c2c] content-stretch flex items-center justify-center px-[10px] py-[4px] relative rounded-[4px] shrink-0">
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#faf1e9] text-[12px] text-nowrap tracking-[1.56px] uppercase">Team access</p>
    </div>
  );
}

function Frame35() {
  return (
    <div className="content-stretch flex flex-col items-start relative shrink-0 w-full">
      <Frame98 />
    </div>
  );
}

function Frame31() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[rgba(6,6,6,0.03)] content-stretch flex flex-col gap-[26px] h-[207px] items-start px-[40px] py-[38px] relative rounded-[12px] shrink-0 w-[471px]">
      <Frame35 />
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#060606] text-[16px] w-[351px]">
        <p className="leading-[21px]">Multi-user workspaces with role-based permissions. Manage multiple products, share insights, and coordinate operations across your team.</p>
      </div>
    </div>
  );
}

function Paragraph() {
  return (
    <div className="content-start flex flex-wrap gap-[18px] items-start justify-center relative shrink-0 w-[1004px]" data-name="Paragraph">
      <Form />
      <Frame34 />
      <Frame30 />
      <Frame31 />
    </div>
  );
}

function Frame18() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[62px] items-center left-1/2 top-[130px] translate-x-[-50%] w-[1004px]">
      <Frame17 />
      <Paragraph />
    </div>
  );
}

function Frame99() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-[calc(50%+0.5px)] px-[10px] py-[4px] rounded-[4px] top-[90px] translate-x-[-50%]">
      <div aria-hidden="true" className="absolute border border-[#a1a1a1] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#2c2c2c] text-[12px] text-nowrap tracking-[1.56px] uppercase">Product-led growth</p>
    </div>
  );
}

function Frame83() {
  return (
    <div className="absolute content-stretch flex h-[52px] items-center justify-center left-[calc(50%-19.5px)] pl-[35px] pr-[28px] py-[19px] rounded-[8px] top-[763px] translate-x-[-50%]">
      <div aria-hidden="true" className="absolute border border-[#2c2c2c] border-solid inset-0 pointer-events-none rounded-[8px]" />
      <p className="font-['Geist_Mono:Medium',sans-serif] font-medium leading-[normal] relative shrink-0 text-[#2c2c2c] text-[16px] text-center text-nowrap">Join Waitlist →</p>
    </div>
  );
}

function Frame32() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[rgba(6,6,6,0.03)] h-[210px] relative rounded-[12px] shrink-0 w-full">
      <div className="size-full">
        <div className="size-full" />
      </div>
    </div>
  );
}

function Frame33() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[rgba(6,6,6,0.03)] h-[207px] relative rounded-[12px] shrink-0 w-full">
      <div className="size-full">
        <div className="size-full" />
      </div>
    </div>
  );
}

function Frame95() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[18px] items-start left-[1186px] top-[282px] w-[471px]">
      <Frame32 />
      <Frame33 />
    </div>
  );
}

function Frame36() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[rgba(6,6,6,0.03)] h-[210px] relative rounded-[12px] shrink-0 w-full">
      <div className="size-full">
        <div className="size-full" />
      </div>
    </div>
  );
}

function Frame37() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[rgba(6,6,6,0.03)] h-[207px] relative rounded-[12px] shrink-0 w-full">
      <div className="size-full">
        <div className="size-full" />
      </div>
    </div>
  );
}

function Frame96() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[18px] items-start left-[-281px] top-[282px] w-[471px]">
      <Frame36 />
      <Frame37 />
    </div>
  );
}

function Frame81() {
  return (
    <div className="absolute bg-[#faf1e9] h-[905px] left-1/2 overflow-clip rounded-[16px] top-[4763px] translate-x-[-50%] w-[1376px]">
      <Group2 />
      <Frame18 />
      <Frame99 />
      <Frame83 />
      <Frame95 />
      <Frame96 />
      <div className="absolute bg-gradient-to-r from-[rgba(250,241,233,0)] h-[471px] left-[1168px] to-[#faf1e9] to-[62.694%] top-[274px] w-[208px]" />
      <div className="absolute flex h-[471px] items-center justify-center left-0 top-[274px] w-[208px]">
        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
          <div className="bg-gradient-to-r from-[rgba(250,241,233,0)] h-[471px] to-[#faf1e9] to-[62.694%] w-[208px]" />
        </div>
      </div>
    </div>
  );
}

function Frame85() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-1/2 px-[10px] py-[4px] rounded-[4px] top-[186px] translate-x-[-50%]">
      <div aria-hidden="true" className="absolute border border-[#a1a1a1] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#ebdccf] text-[12px] text-nowrap tracking-[1.56px]">CUSTOMER SUCCESS AI AGENT</p>
    </div>
  );
}

function Frame38() {
  return (
    <div className="backdrop-blur-[50px] backdrop-filter content-stretch flex items-center justify-center px-[5.048px] py-[2.524px] relative rounded-[4px] shrink-0">
      <div aria-hidden="true" className="absolute border-[#faf1e9] border-[0.631px] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#faf1e9] text-[11px] text-center text-nowrap uppercase">getting started</p>
    </div>
  );
}

function Frame39() {
  return (
    <div className="content-stretch flex flex-col gap-[4px] items-start leading-[0] relative shrink-0 text-[#faf1e9] w-full">
      <div className="flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center relative shrink-0 text-[36px] tracking-[-0.96px] w-full">
        <p className="leading-[normal]">Free plan</p>
      </div>
      <div className="flex flex-col font-['Geist_Mono:Regular',sans-serif] font-normal justify-center relative shrink-0 text-[20px] tracking-[1.2px] w-full">
        <p className="leading-[normal]">0€/month</p>
      </div>
    </div>
  );
}

function Svg10() {
  return (
    <div className="relative shrink-0 size-[12.8px]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 13 13">
        <g id="SVG">
          <path d={svgPaths.p5ffe700} id="Vector" stroke="var(--stroke-0, #FAF1E9)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.06667" />
          <path d={svgPaths.p1e483c00} id="Vector_2" stroke="var(--stroke-0, #FAF1E9)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.06667" />
        </g>
      </svg>
    </div>
  );
}

function Frame23() {
  return (
    <div className="content-stretch flex gap-[6px] items-center relative shrink-0">
      <Svg10 />
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#faf1e9] text-[18px] text-nowrap">
        <p className="leading-[19.6px]">1 live site</p>
      </div>
    </div>
  );
}

function Svg11() {
  return (
    <div className="relative shrink-0 size-[12.8px]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 13 13">
        <g id="SVG">
          <path d={svgPaths.p5ffe700} id="Vector" stroke="var(--stroke-0, #FAF1E9)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.06667" />
          <path d={svgPaths.p1e483c00} id="Vector_2" stroke="var(--stroke-0, #FAF1E9)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.06667" />
        </g>
      </svg>
    </div>
  );
}

function Frame24() {
  return (
    <div className="content-stretch flex gap-[6px] items-center relative shrink-0">
      <Svg11 />
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#faf1e9] text-[18px] text-nowrap">
        <p className="leading-[19.6px]">Up to 5 monthly onboardings</p>
      </div>
    </div>
  );
}

function Svg12() {
  return (
    <div className="relative shrink-0 size-[12.8px]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 13 13">
        <g id="SVG">
          <path d={svgPaths.p5ffe700} id="Vector" stroke="var(--stroke-0, #FAF1E9)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.06667" />
          <path d={svgPaths.p1e483c00} id="Vector_2" stroke="var(--stroke-0, #FAF1E9)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.06667" />
        </g>
      </svg>
    </div>
  );
}

function Frame25() {
  return (
    <div className="content-stretch flex gap-[6px] items-center relative shrink-0">
      <Svg12 />
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#faf1e9] text-[18px] text-nowrap">
        <p className="leading-[19.6px]">Basic analytics</p>
      </div>
    </div>
  );
}

function Frame40() {
  return (
    <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0">
      <Frame23 />
      <Frame24 />
      <Frame25 />
    </div>
  );
}

function Frame41() {
  return (
    <div className="content-stretch flex flex-col h-[227px] items-start justify-between relative shrink-0 w-full">
      <Frame39 />
      <Frame40 />
    </div>
  );
}

function Frame42() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0">
      <Frame38 />
      <Frame41 />
    </div>
  );
}

function Frame3() {
  return (
    <div className="h-[52px] relative rounded-[8px] shrink-0 w-full">
      <div aria-hidden="true" className="absolute border border-[#faf1e9] border-solid inset-0 pointer-events-none rounded-[8px]" />
      <div className="flex flex-row items-center justify-center size-full">
        <div className="content-stretch flex items-center justify-center pl-[35px] pr-[28px] py-[19px] relative size-full">
          <p className="font-['Geist_Mono:Medium',sans-serif] font-medium leading-[normal] relative shrink-0 text-[#faf1e9] text-[16px] text-center text-nowrap">Try for free →</p>
        </div>
      </div>
    </div>
  );
}

function Form1() {
  return (
    <div className="absolute backdrop-blur-[500px] backdrop-filter bg-gradient-to-r content-stretch flex flex-col from-[#2c2c2c] h-[503.208px] items-start justify-between left-[666px] pb-[24px] pt-[32px] px-[32px] rounded-[16px] to-[#2c2c2c] top-[4053.64px] w-[343.8px]" data-name="Form" style={{ backgroundImage: "url('data:image/svg+xml;utf8,<svg viewBox=\\\'0 0 343.8 503.21\\\' xmlns=\\\'http://www.w3.org/2000/svg\\\' preserveAspectRatio=\\\'none\\\'><rect x=\\\'0\\\' y=\\\'0\\\' height=\\\'100%\\\' width=\\\'100%\\\' fill=\\\'url(%23grad)\\\' opacity=\\\'0.8500000238418579\\\'/><defs><radialGradient id=\\\'grad\\\' gradientUnits=\\\'userSpaceOnUse\\\' cx=\\\'0\\\' cy=\\\'0\\\' r=\\\'10\\\' gradientTransform=\\\'matrix(4.4234e-7 -26.55 28.441 4.3894e-7 172 82.858)\\\'><stop stop-color=\\\'rgba(23,23,23,0.44314)\\\' offset=\\\'0\\\'/><stop stop-color=\\\'rgba(23,23,23,1)\\\' offset=\\\'0.98077\\\'/></radialGradient></defs></svg>')" }}>
      <Frame42 />
      <Frame3 />
    </div>
  );
}

function Frame43() {
  return (
    <div className="backdrop-blur-[50px] backdrop-filter content-stretch flex items-center justify-center px-[5.048px] py-[2.524px] relative rounded-[4px] shrink-0">
      <div aria-hidden="true" className="absolute border-[#2c2c2c] border-[0.631px] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#2c2c2c] text-[11px] text-center text-nowrap uppercase">Scale with bundles</p>
    </div>
  );
}

function Frame44() {
  return (
    <div className="content-stretch flex flex-col gap-[4px] items-start leading-[0] relative shrink-0 text-[#2c2c2c] w-full">
      <div className="flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center relative shrink-0 text-[36px] tracking-[-0.96px] w-full">
        <p className="leading-[normal]">Growth plan</p>
      </div>
      <div className="flex flex-col font-['Geist_Mono:Regular',sans-serif] font-normal justify-center relative shrink-0 text-[20px] tracking-[1.2px] w-full">
        <p className="leading-[normal]">10€/site</p>
      </div>
    </div>
  );
}

function Svg13() {
  return (
    <div className="relative shrink-0 size-[12.8px]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 13 13">
        <g id="SVG">
          <path d={svgPaths.p5ffe700} id="Vector" stroke="var(--stroke-0, #2C2C2C)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.06667" />
          <path d={svgPaths.p1e483c00} id="Vector_2" stroke="var(--stroke-0, #2C2C2C)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.06667" />
        </g>
      </svg>
    </div>
  );
}

function Frame45() {
  return (
    <div className="content-stretch flex gap-[6px] items-center relative shrink-0">
      <Svg13 />
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#2c2c2c] text-[18px] text-nowrap">
        <p className="leading-[19.6px]">Unlimited sites</p>
      </div>
    </div>
  );
}

function Svg14() {
  return (
    <div className="relative shrink-0 size-[12.8px]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 13 13">
        <g id="SVG">
          <path d={svgPaths.p5ffe700} id="Vector" stroke="var(--stroke-0, #2C2C2C)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.06667" />
          <path d={svgPaths.p1e483c00} id="Vector_2" stroke="var(--stroke-0, #2C2C2C)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.06667" />
        </g>
      </svg>
    </div>
  );
}

function Frame46() {
  return (
    <div className="content-stretch flex gap-[6px] items-center relative shrink-0">
      <Svg14 />
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#2c2c2c] text-[18px] w-[261px]">
        <p className="leading-[19.6px]">Bundle pricing (e.g., 70 for €50)</p>
      </div>
    </div>
  );
}

function Svg15() {
  return (
    <div className="relative shrink-0 size-[12.8px]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 13 13">
        <g id="SVG">
          <path d={svgPaths.p5ffe700} id="Vector" stroke="var(--stroke-0, #2C2C2C)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.06667" />
          <path d={svgPaths.p1e483c00} id="Vector_2" stroke="var(--stroke-0, #2C2C2C)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.06667" />
        </g>
      </svg>
    </div>
  );
}

function Frame47() {
  return (
    <div className="content-stretch flex gap-[6px] items-center relative shrink-0">
      <Svg15 />
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#2c2c2c] text-[18px] text-nowrap">
        <p className="leading-[19.6px]">Advanced analytics</p>
      </div>
    </div>
  );
}

function Frame48() {
  return (
    <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0">
      <Frame45 />
      <Frame46 />
      <Frame47 />
    </div>
  );
}

function Frame26() {
  return (
    <div className="basis-0 content-stretch flex flex-col grow items-start justify-between min-h-px min-w-px relative shrink-0 w-full">
      <Frame44 />
      <Frame48 />
    </div>
  );
}

function Frame49() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] h-[247px] items-start relative shrink-0">
      <Frame43 />
      <Frame26 />
    </div>
  );
}

function Frame4() {
  return (
    <div className="h-[52px] relative rounded-[8px] shrink-0 w-full">
      <div aria-hidden="true" className="absolute border border-[#2c2c2c] border-solid inset-0 pointer-events-none rounded-[8px]" />
      <div className="flex flex-row items-center justify-center size-full">
        <div className="content-stretch flex items-center justify-center pl-[35px] pr-[28px] py-[19px] relative size-full">
          <p className="font-['Geist_Mono:Medium',sans-serif] font-medium leading-[normal] relative shrink-0 text-[#2c2c2c] text-[16px] text-center text-nowrap">Try for free →</p>
        </div>
      </div>
    </div>
  );
}

function Form2() {
  return (
    <div className="absolute backdrop-blur-[500px] backdrop-filter bg-gradient-to-r from-[#edc29c] h-[503.208px] left-[1032px] rounded-[16px] to-[#edc29c] top-[4053.64px]" data-name="Form" style={{ backgroundImage: "url('data:image/svg+xml;utf8,<svg viewBox=\\\'0 0 343.8 503.21\\\' xmlns=\\\'http://www.w3.org/2000/svg\\\' preserveAspectRatio=\\\'none\\\'><rect x=\\\'0\\\' y=\\\'0\\\' height=\\\'100%\\\' width=\\\'100%\\\' fill=\\\'url(%23grad)\\\' opacity=\\\'0.8500000238418579\\\'/><defs><radialGradient id=\\\'grad\\\' gradientUnits=\\\'userSpaceOnUse\\\' cx=\\\'0\\\' cy=\\\'0\\\' r=\\\'10\\\' gradientTransform=\\\'matrix(-3.0148e-7 -13.75 22.968 -5.0359e-7 172 -45.142)\\\'><stop stop-color=\\\'rgba(250,241,233,1)\\\' offset=\\\'0\\\'/><stop stop-color=\\\'rgba(244,218,195,1)\\\' offset=\\\'0.49038\\\'/><stop stop-color=\\\'rgba(237,194,156,1)\\\' offset=\\\'0.98077\\\'/></radialGradient></defs></svg>')" }}>
      <div className="content-stretch flex flex-col h-full items-start justify-between overflow-clip pb-[24px] pt-[32px] px-[32px] relative rounded-[inherit]">
        <Frame49 />
        <Frame4 />
        <div className="absolute flex flex-col font-['Geist_Mono:Regular',sans-serif] font-normal h-[15px] justify-center leading-[0] left-[312px] text-[#2c2c2c] text-[12px] text-right top-[39.86px] translate-x-[-100%] translate-y-[-50%] w-[51px]">
          <p className="leading-[23px]">Popular</p>
        </div>
      </div>
      <div aria-hidden="true" className="absolute border border-solid border-white inset-[-1px] pointer-events-none rounded-[17px]" />
    </div>
  );
}

function Frame82() {
  return (
    <div className="absolute content-stretch flex h-[27.763px] items-center justify-center left-[95px] px-[10px] py-[4px] rounded-[4px] top-[4053.64px]">
      <div aria-hidden="true" className="absolute border border-[#edc29c] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#edc29c] text-[12px] text-nowrap tracking-[1.56px]">PRICING</p>
    </div>
  );
}

function Group() {
  return (
    <div className="absolute contents left-[33px] top-[3953px]">
      <div className="absolute h-[723px] left-[33px] rounded-[16px] top-[3953px] w-[1376px]" />
      <div className="absolute flex flex-col font-['Geist:Medium',sans-serif] font-medium h-[122px] justify-center leading-[0] left-[calc(50%-625px)] text-[#ebdccf] text-[48px] top-[4160px] tracking-[-0.96px] translate-y-[-50%] w-[505px]">
        <p className="leading-[52.8px]">
          <span>{`Simple, reliable, `}</span>
          <span className="text-[#edc29c]">{`outcome-based `}</span>pricing
        </p>
      </div>
      <div className="absolute flex flex-col font-['Geist:Regular',sans-serif] font-normal h-[26.606px] justify-center leading-[0] left-[calc(50%-625px)] text-[#a1a1a1] text-[18px] top-[4262.44px] translate-y-[-50%] w-[495px]">
        <p className="leading-[23px]">Only pay when your customer succeeds.</p>
      </div>
      <Form1 />
      <Form2 />
      <Frame82 />
    </div>
  );
}

function Frame50() {
  return (
    <div className="content-stretch flex flex-col gap-[18px] items-center leading-[0] relative shrink-0 text-center w-full">
      <div className="flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center min-w-full relative shrink-0 text-[#ebdccf] text-[48px] tracking-[-1.3536px] w-[min-content]">
        <p className="leading-[74.732px]">Works with any Vibe-coding platform</p>
      </div>
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal h-[40px] justify-center leading-[23px] relative shrink-0 text-[#a1a1a1] text-[18px] w-[579.23px]">
        <p className="mb-0">{`Cursor, Windsurf, v0, Bolt — doesn't matter!`}</p>
        <p>Skene reads the output and generates PLG flows automatically.</p>
      </div>
    </div>
  );
}

function Cube2DDark() {
  return (
    <div className="h-[50.698px] relative shrink-0 w-[44.471px]" data-name="CUBE_2D_DARK 1">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 45 51">
        <g clipPath="url(#clip0_1_579)" id="CUBE_2D_DARK 1">
          <path d={svgPaths.p13ce3380} fill="var(--fill-0, #EDC29C)" id="Vector" />
        </g>
        <defs>
          <clipPath id="clip0_1_579">
            <rect fill="white" height="50.6982" width="44.4706" />
          </clipPath>
        </defs>
      </svg>
    </div>
  );
}

function Form3() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[#151515] content-stretch flex flex-col gap-[12px] items-center justify-center px-[28.588px] py-[18px] relative rounded-[12.706px] shrink-0 w-[105px]" data-name="Form">
      <Cube2DDark />
      <div className="flex flex-col font-['DM_Mono:Regular',sans-serif] h-[7px] justify-center leading-[0] not-italic relative shrink-0 text-[#ebdccf] text-[10px] text-center tracking-[1.6px] w-[44px]">
        <p className="leading-[19.6px]">Cursor</p>
      </div>
    </div>
  );
}

function Frame8() {
  return (
    <div className="absolute h-[29.379px] left-1/2 top-[calc(50%-0.03px)] translate-x-[-50%] translate-y-[-50%] w-[50.823px]">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 51 30">
        <g id="Group 323">
          <path d={svgPaths.p2746ce80} fill="var(--fill-0, #EDC29C)" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Frame9() {
  return (
    <div className="h-[50.824px] relative shrink-0 w-[50.823px]">
      <Frame8 />
    </div>
  );
}

function Form4() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[#151515] content-stretch flex flex-col gap-[12px] items-center justify-center px-[28.588px] py-[18px] relative rounded-[12.706px] shrink-0 size-[105px]" data-name="Form">
      <Frame9 />
      <div className="flex flex-col font-['DM_Mono:Regular',sans-serif] h-[7px] justify-center leading-[0] not-italic relative shrink-0 text-[#ebdccf] text-[10px] text-center tracking-[1.6px] w-[63px]">
        <p className="leading-[19.6px]">Windsurf</p>
      </div>
    </div>
  );
}

function V() {
  return (
    <div className="absolute h-[25.412px] left-0 top-[calc(50%-0.3px)] translate-y-[-50%] w-[50.832px]" data-name="v0">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 51 26">
        <g id="v0">
          <path clipRule="evenodd" d={svgPaths.p2bd74e00} fill="var(--fill-0, #EDC29C)" fillRule="evenodd" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Frame13() {
  return (
    <div className="relative shrink-0 size-[50.824px]">
      <V />
    </div>
  );
}

function Form5() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[#151515] content-stretch flex flex-col gap-[12px] items-center justify-center px-[28.588px] py-[18px] relative rounded-[12.706px] shrink-0 size-[105px]" data-name="Form">
      <Frame13 />
      <div className="flex flex-col font-['DM_Mono:Regular',sans-serif] h-[7px] justify-center leading-[0] not-italic relative shrink-0 text-[#ebdccf] text-[10px] text-center tracking-[1.6px] w-[44px]">
        <p className="leading-[19.6px]">v0</p>
      </div>
    </div>
  );
}

function Frame12() {
  return (
    <div className="relative shrink-0 size-[50.824px]">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 51 51">
        <g id="Frame 324">
          <path clipRule="evenodd" d={svgPaths.p672b971} fill="var(--fill-0, #EDC29C)" fillRule="evenodd" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Form6() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[#151515] content-stretch flex flex-col gap-[12px] items-center justify-center px-[28.588px] py-[18px] relative rounded-[12.706px] shrink-0 size-[105px]" data-name="Form">
      <Frame12 />
      <div className="flex flex-col font-['DM_Mono:Regular',sans-serif] h-[7px] justify-center leading-[0] not-italic relative shrink-0 text-[#ebdccf] text-[10px] text-center tracking-[1.6px] w-[44px]">
        <p className="leading-[19.6px]">Bolt</p>
      </div>
    </div>
  );
}

function Frame10() {
  return (
    <div className="absolute h-[29.379px] left-1/2 top-[calc(50%-0.03px)] translate-x-[-50%] translate-y-[-50%] w-[50.823px]">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 51 30">
        <g id="Group 323">
          <path d={svgPaths.p2b0ed180} fill="var(--fill-0, #EDC29C)" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Frame11() {
  return (
    <div className="h-[50.824px] relative shrink-0 w-[50.823px]">
      <Frame10 />
    </div>
  );
}

function Form7() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[#151515] content-stretch flex flex-col gap-[12px] items-center justify-center px-[28.588px] py-[18px] relative rounded-[12.706px] shrink-0 size-[105px]" data-name="Form">
      <Frame11 />
      <div className="flex flex-col font-['DM_Mono:Regular',sans-serif] h-[7px] justify-center leading-[0] not-italic relative shrink-0 text-[#ebdccf] text-[10px] text-center tracking-[1.6px] w-[63px]">
        <p className="leading-[19.6px]">Windsurf</p>
      </div>
    </div>
  );
}

function V1() {
  return (
    <div className="absolute h-[25.412px] left-0 top-[calc(50%-0.3px)] translate-y-[-50%] w-[50.832px]" data-name="v0">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 51 26">
        <g id="v0">
          <path clipRule="evenodd" d={svgPaths.p2bd74e00} fill="var(--fill-0, #EDC29C)" fillRule="evenodd" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Frame19() {
  return (
    <div className="relative shrink-0 size-[50.824px]">
      <V1 />
    </div>
  );
}

function Form8() {
  return (
    <div className="backdrop-blur-[14.374px] backdrop-filter bg-[#151515] content-stretch flex flex-col gap-[12px] items-center justify-center px-[28.588px] py-[18px] relative rounded-[12.706px] shrink-0 size-[105px]" data-name="Form">
      <Frame19 />
      <div className="flex flex-col font-['DM_Mono:Light',sans-serif] h-[7px] justify-center leading-[0] not-italic relative shrink-0 text-[#ebdccf] text-[10px] text-center tracking-[1.6px] w-[44px]">
        <p className="leading-[19.6px]">v0</p>
      </div>
    </div>
  );
}

function Paragraph1() {
  return (
    <div className="content-stretch flex gap-[16px] items-center px-[54px] py-0 relative shrink-0" data-name="Paragraph">
      <Form3 />
      <Form4 />
      <Form5 />
      <Form6 />
      <Form3 />
      <Form7 />
      <Form5 />
      <Form6 />
      <Form3 />
      <Form7 />
      <Form8 />
      <Form6 />
    </div>
  );
}

function Container() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[62px] items-center left-[48px] top-[135px] w-[1280px]" data-name="Container">
      <Frame50 />
      <Paragraph1 />
    </div>
  );
}

function Group1() {
  return (
    <div className="absolute contents left-[-32px] top-[135px]">
      <Container />
      <div className="absolute bg-gradient-to-r from-[rgba(6,6,6,0)] h-[164px] left-[829px] to-[#060606] to-[62.694%] top-[306px] w-[579px]" />
      <div className="absolute flex h-[202px] items-center justify-center left-[-32px] top-[282px] w-[579px]">
        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
          <div className="bg-gradient-to-r from-[rgba(6,6,6,0)] h-[202px] to-[#060606] to-[62.694%] w-[579px]" />
        </div>
      </div>
    </div>
  );
}

function Frame90() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-1/2 px-[10px] py-[4px] rounded-[4px] top-[96px] translate-x-[-50%]">
      <div aria-hidden="true" className="absolute border border-[#a1a1a1] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#faf1e9] text-[12px] text-nowrap tracking-[1.56px]">INTEGRATIONS</p>
    </div>
  );
}

function Frame91() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-1/2 px-[10px] py-[4px] rounded-[4px] top-[95px] translate-x-[-50%]">
      <div aria-hidden="true" className="absolute border border-[#edc29c] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#edc29c] text-[12px] text-nowrap tracking-[1.56px]">INTEGRATIONS</p>
    </div>
  );
}

function Frame66() {
  return (
    <div className="absolute backdrop-blur-[35px] backdrop-filter h-[618px] left-1/2 overflow-clip rounded-[16px] top-[780px] translate-x-[-50%] w-[1376px]">
      <Group1 />
      <Frame90 />
      <Frame91 />
    </div>
  );
}

function Frame100() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-1/2 px-[10px] py-[4px] rounded-[4px] top-[2342px] translate-x-[-50%]">
      <div aria-hidden="true" className="absolute border border-[#a1a1a1] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#faf1e9] text-[12px] text-nowrap tracking-[1.56px]">INTEGRATIONS</p>
    </div>
  );
}

function ArrowDropDown() {
  return (
    <div className="relative shrink-0 size-[24px]" data-name="arrow_drop_down">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="arrow_drop_down">
          <mask height="24" id="mask0_1_528" maskUnits="userSpaceOnUse" style={{ maskType: "alpha" }} width="24" x="0" y="0">
            <rect fill="var(--fill-0, #D9D9D9)" height="24" id="Bounding box" width="24" />
          </mask>
          <g mask="url(#mask0_1_528)">
            <path d={svgPaths.p29954180} fill="var(--fill-0, #EBDCCF)" id="arrow_drop_down_2" />
          </g>
        </g>
      </svg>
    </div>
  );
}

function Frame51() {
  return (
    <div className="basis-0 content-stretch flex grow items-center justify-between min-h-px min-w-px relative shrink-0">
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#ebdccf] text-[20px] text-nowrap tracking-[-0.96px]">
        <p className="leading-[26px]">What is PLG software?</p>
      </div>
      <ArrowDropDown />
    </div>
  );
}

function Frame52() {
  return (
    <div className="content-stretch flex items-start justify-between relative shrink-0 w-full">
      <Frame51 />
    </div>
  );
}

function Frame53() {
  return (
    <div className="content-stretch flex flex-col items-start justify-center relative shrink-0 w-full">
      <Frame52 />
    </div>
  );
}

function ArrowDropDown1() {
  return (
    <div className="relative shrink-0 size-[24px]" data-name="arrow_drop_down">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="arrow_drop_down">
          <mask height="24" id="mask0_1_528" maskUnits="userSpaceOnUse" style={{ maskType: "alpha" }} width="24" x="0" y="0">
            <rect fill="var(--fill-0, #D9D9D9)" height="24" id="Bounding box" width="24" />
          </mask>
          <g mask="url(#mask0_1_528)">
            <path d={svgPaths.p29954180} fill="var(--fill-0, #EBDCCF)" id="arrow_drop_down_2" />
          </g>
        </g>
      </svg>
    </div>
  );
}

function Frame54() {
  return (
    <div className="content-stretch flex items-center justify-between relative shrink-0 w-full">
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#ebdccf] text-[20px] tracking-[-0.96px] w-[449px]">
        <p className="leading-[26px]">How is Skene different from traditional customer experience software?</p>
      </div>
      <ArrowDropDown1 />
    </div>
  );
}

function ArrowDropDown2() {
  return (
    <div className="relative shrink-0 size-[24px]" data-name="arrow_drop_down">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="arrow_drop_down">
          <mask height="24" id="mask0_1_524" maskUnits="userSpaceOnUse" style={{ maskType: "alpha" }} width="24" x="0" y="0">
            <rect fill="var(--fill-0, #D9D9D9)" height="24" id="Bounding box" width="24" />
          </mask>
          <g mask="url(#mask0_1_524)">
            <path d={svgPaths.p1fda8100} fill="var(--fill-0, #EBDCCF)" id="arrow_drop_down_2" />
          </g>
        </g>
      </svg>
    </div>
  );
}

function Frame55() {
  return (
    <div className="content-stretch flex h-[26px] items-center justify-between relative shrink-0 w-full">
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#ebdccf] text-[20px] tracking-[-0.96px] w-[507px]">
        <p className="leading-[26px]">How long does it take to set up?</p>
      </div>
      <ArrowDropDown2 />
    </div>
  );
}

function ArrowDropDown3() {
  return (
    <div className="relative shrink-0 size-[24px]" data-name="arrow_drop_down">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="arrow_drop_down">
          <mask height="24" id="mask0_1_528" maskUnits="userSpaceOnUse" style={{ maskType: "alpha" }} width="24" x="0" y="0">
            <rect fill="var(--fill-0, #D9D9D9)" height="24" id="Bounding box" width="24" />
          </mask>
          <g mask="url(#mask0_1_528)">
            <path d={svgPaths.p29954180} fill="var(--fill-0, #EBDCCF)" id="arrow_drop_down_2" />
          </g>
        </g>
      </svg>
    </div>
  );
}

function Frame56() {
  return (
    <div className="content-stretch flex items-center justify-between relative shrink-0 w-full">
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#ebdccf] text-[20px] text-nowrap tracking-[-0.96px]">
        <p className="leading-[26px]">How does outcome-based pricing work?</p>
      </div>
      <ArrowDropDown3 />
    </div>
  );
}

function ArrowDropDown4() {
  return (
    <div className="relative shrink-0 size-[24px]" data-name="arrow_drop_down">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="arrow_drop_down">
          <mask height="24" id="mask0_1_528" maskUnits="userSpaceOnUse" style={{ maskType: "alpha" }} width="24" x="0" y="0">
            <rect fill="var(--fill-0, #D9D9D9)" height="24" id="Bounding box" width="24" />
          </mask>
          <g mask="url(#mask0_1_528)">
            <path d={svgPaths.p29954180} fill="var(--fill-0, #EBDCCF)" id="arrow_drop_down_2" />
          </g>
        </g>
      </svg>
    </div>
  );
}

function Frame57() {
  return (
    <div className="content-stretch flex items-center justify-between relative shrink-0 w-full">
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#ebdccf] text-[20px] text-nowrap tracking-[-0.96px]">
        <p className="leading-[26px]">Is my code secure?</p>
      </div>
      <ArrowDropDown4 />
    </div>
  );
}

function ArrowDropDown5() {
  return (
    <div className="relative shrink-0 size-[24px]" data-name="arrow_drop_down">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="arrow_drop_down">
          <mask height="24" id="mask0_1_528" maskUnits="userSpaceOnUse" style={{ maskType: "alpha" }} width="24" x="0" y="0">
            <rect fill="var(--fill-0, #D9D9D9)" height="24" id="Bounding box" width="24" />
          </mask>
          <g mask="url(#mask0_1_528)">
            <path d={svgPaths.p29954180} fill="var(--fill-0, #EBDCCF)" id="arrow_drop_down_2" />
          </g>
        </g>
      </svg>
    </div>
  );
}

function Frame58() {
  return (
    <div className="content-stretch flex items-center justify-between relative shrink-0 w-full">
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#ebdccf] text-[20px] text-nowrap tracking-[-0.96px]">
        <p className="leading-[26px]">What kind of analytics does Skene provide?</p>
      </div>
      <ArrowDropDown5 />
    </div>
  );
}

function Frame86() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[25px] items-start left-[606px] top-[147px] w-[647px]">
      <Frame53 />
      <div className="h-0 relative shrink-0 w-full">
        <div className="absolute inset-[-1px_0_0_0]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 647 1">
            <line id="Line 56" stroke="var(--stroke-0, #EBDCCF)" strokeOpacity="0.24" x2="647" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
      <Frame54 />
      <div className="h-0 relative shrink-0 w-full">
        <div className="absolute inset-[-1px_0_0_0]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 647 1">
            <line id="Line 56" stroke="var(--stroke-0, #EBDCCF)" strokeOpacity="0.24" x2="647" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
      <Frame55 />
      <div className="h-0 relative shrink-0 w-full">
        <div className="absolute inset-[-1px_0_0_0]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 647 1">
            <line id="Line 56" stroke="var(--stroke-0, #EBDCCF)" strokeOpacity="0.24" x2="647" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
      <Frame56 />
      <div className="h-0 relative shrink-0 w-full">
        <div className="absolute inset-[-1px_0_0_0]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 647 1">
            <line id="Line 56" stroke="var(--stroke-0, #EBDCCF)" strokeOpacity="0.24" x2="647" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
      <Frame57 />
      <div className="h-0 relative shrink-0 w-full">
        <div className="absolute inset-[-1px_0_0_0]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 647 1">
            <line id="Line 56" stroke="var(--stroke-0, #EBDCCF)" strokeOpacity="0.24" x2="647" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
      <Frame58 />
      <div className="h-0 relative shrink-0 w-full">
        <div className="absolute inset-[-1px_0_0_0]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 647 1">
            <line id="Line 56" stroke="var(--stroke-0, #EBDCCF)" strokeOpacity="0.24" x2="647" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
    </div>
  );
}

function Frame77() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-[126px] px-[10px] py-[4px] rounded-[4px] top-[147px]">
      <div aria-hidden="true" className="absolute border border-[#edc29c] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#edc29c] text-[12px] text-nowrap tracking-[1.56px]">FAQs</p>
    </div>
  );
}

function Frame101() {
  return (
    <div className="absolute h-[724px] left-[33px] top-[6490px] w-[1376px]">
      <div className="absolute bg-[rgba(235,220,207,0)] h-[724px] left-0 rounded-[12px] top-0 w-[1376px]" />
      <div className="absolute flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center leading-[0] left-[126px] text-[#ebdccf] text-[48px] top-[240px] translate-y-[-50%] w-[392px]">
        <p className="leading-[52.8px]">Frequently Asked Questions</p>
      </div>
      <div className="absolute flex flex-col font-['Geist:Regular',sans-serif] font-normal h-[15px] justify-center leading-[0] left-[126px] text-[#ebdccf] text-[18px] top-[315.5px] translate-y-[-50%] w-[580px]">
        <p className="leading-[23px]">Everything you need to know about Skene</p>
      </div>
      <Frame86 />
      <Frame77 />
    </div>
  );
}

function Frame14() {
  return (
    <div className="content-stretch flex flex-col gap-[6px] items-center leading-[0] relative shrink-0 text-center text-nowrap w-[301.99px]">
      <div className="bg-clip-text bg-gradient-to-b flex flex-col font-['Geist:SemiBold',sans-serif] font-semibold from-[#faf1e9] justify-center relative shrink-0 text-[96px] to-[#edc29c] tracking-[-1.92px]" style={{ WebkitTextFillColor: "transparent" }}>
        <p className="leading-[152.994px] text-nowrap">5m</p>
      </div>
      <div className="flex flex-col font-['Geist_Mono:Light',sans-serif] font-light justify-center relative shrink-0 text-[#ebdccf] text-[11px] tracking-[1.76px]">
        <p className="leading-[14px] text-nowrap">Average setup time</p>
      </div>
    </div>
  );
}

function Form9() {
  return (
    <div className="absolute backdrop-blur-[14.374px] backdrop-filter bg-[rgba(255,255,255,0.06)] content-stretch flex flex-col h-[254px] items-center justify-center left-[261px] pb-[18px] pt-0 px-0 rounded-[12.706px] top-[2576px] w-[300px]" data-name="Form">
      <Frame14 />
    </div>
  );
}

function Frame20() {
  return <div className="h-[173px] shrink-0 w-[301.99px]" />;
}

function Form10() {
  return (
    <div className="absolute backdrop-blur-[14.374px] backdrop-filter bg-[rgba(255,255,255,0.06)] content-stretch flex flex-col h-[254px] items-center justify-center left-[-55px] pb-[18px] pt-0 px-0 rounded-[12.706px] top-[2576px] w-[300px]" data-name="Form">
      <Frame20 />
    </div>
  );
}

function Frame16() {
  return (
    <div className="content-stretch flex flex-col gap-[6px] items-center leading-[0] relative shrink-0 text-center text-nowrap">
      <div className="bg-clip-text bg-gradient-to-b flex flex-col font-['Geist:SemiBold',sans-serif] font-semibold from-[#faf1e9] justify-center relative shrink-0 text-[96px] to-[#edc29c] tracking-[-1.92px]" style={{ WebkitTextFillColor: "transparent" }}>
        <p className="leading-[152.994px] text-nowrap">95%</p>
      </div>
      <div className="flex flex-col font-['Geist_Mono:Light',sans-serif] font-light justify-center relative shrink-0 text-[#ebdccf] text-[11px] tracking-[1.76px]">
        <p className="leading-[14px] text-nowrap">Customer satisfaction</p>
      </div>
    </div>
  );
}

function Form11() {
  return (
    <div className="absolute backdrop-blur-[14.374px] backdrop-filter bg-[rgba(255,255,255,0.06)] content-stretch flex flex-col h-[254px] items-center justify-center left-[calc(50%+7px)] rounded-[8px] top-[2576px] translate-x-[-50%] w-[300px]" data-name="Form">
      <Frame16 />
    </div>
  );
}

function Frame15() {
  return (
    <div className="content-stretch flex flex-col gap-[6px] items-center leading-[0] relative shrink-0 text-center text-nowrap w-[301.99px]">
      <div className="bg-clip-text bg-gradient-to-b flex flex-col font-['Geist:SemiBold',sans-serif] font-semibold from-[#faf1e9] justify-center relative shrink-0 text-[96px] to-[#edc29c] tracking-[-1.92px]" style={{ WebkitTextFillColor: "transparent" }}>
        <p className="leading-[152.994px] text-nowrap">3x</p>
      </div>
      <div className="flex flex-col font-['Geist_Mono:Light',sans-serif] font-light justify-center relative shrink-0 text-[#ebdccf] text-[11px] tracking-[1.76px]">
        <p className="leading-[14px] text-nowrap">Increase in completion rate</p>
      </div>
    </div>
  );
}

function Form12() {
  return (
    <div className="absolute backdrop-blur-[14.374px] backdrop-filter bg-[rgba(255,255,255,0.06)] content-stretch flex flex-col h-[254px] items-center justify-center left-[893px] rounded-[12.706px] top-[2576px] w-[300px]" data-name="Form">
      <Frame15 />
    </div>
  );
}

function Frame21() {
  return <div className="h-[173px] shrink-0 w-[301.99px]" />;
}

function Form13() {
  return (
    <div className="absolute backdrop-blur-[14.374px] backdrop-filter bg-[rgba(255,255,255,0.06)] content-stretch flex flex-col h-[254px] items-center justify-center left-[1209px] rounded-[12.706px] top-[2576px] w-[300px]" data-name="Form">
      <Frame21 />
    </div>
  );
}

function Frame59() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[18px] items-center leading-[0] left-1/2 text-center top-[2381px] translate-x-[-50%] w-[1280px]">
      <div className="flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center min-w-full relative shrink-0 text-[#ebdccf] text-[48px] tracking-[-1.3536px] w-[min-content]">
        <p className="leading-[74.732px]">
          <span>{`Built for builders who `}</span>
          <span className="text-[#ebdccf]">ship fast</span>
        </p>
      </div>
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal h-[40px] justify-center leading-[23px] relative shrink-0 text-[#a1a1a1] text-[18px] w-[579.23px]">
        <p className="mb-0">{`Cursor, Windsurf, v0, Bolt — doesn't matter!`}</p>
        <p>Skene reads the output and generates PLG flows automatically.</p>
      </div>
    </div>
  );
}

function SvgSkeneLogo1() {
  return (
    <div className="absolute left-[67px] size-[32.188px] top-[9330px]" data-name="SVG - Skene Logo">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 33 33">
        <g id="SVG - Skene Logo">
          <path d={svgPaths.p18682e80} id="Vector" stroke="var(--stroke-0, #FAFAFA)" strokeLinecap="round" strokeWidth="1.28752" />
          <path d="M3.21819 22.535V16.0964" id="Vector_2" stroke="var(--stroke-0, #FAFAFA)" strokeLinecap="round" strokeWidth="1.28752" />
          <path d="M3.21819 9.65466V11.2643" id="Vector_3" stroke="var(--stroke-0, #FAFAFA)" strokeLinecap="round" strokeWidth="1.28752" />
          <path d={svgPaths.p2a1ead80} fill="var(--fill-0, #FAFAFA)" id="Vector_4" opacity="0.8" />
          <path d={svgPaths.p1e9cfd00} fill="var(--fill-0, #FAFAFA)" id="Vector_5" opacity="0.8" />
          <path d={svgPaths.p22089000} fill="var(--fill-0, #FAFAFA)" id="Vector_6" opacity="0.8" />
        </g>
      </svg>
    </div>
  );
}

function Frame115() {
  return (
    <div className="content-stretch flex flex-col font-['Geist:Regular',sans-serif] font-normal gap-[16px] items-start leading-[0] relative shrink-0 text-[#a1a1a1] text-[16px] w-full">
      <div className="flex flex-col justify-center relative shrink-0 w-full">
        <p className="leading-[18px]">Features</p>
      </div>
      <div className="flex flex-col justify-center relative shrink-0 w-full">
        <p className="leading-[18px]">How it works</p>
      </div>
      <div className="flex flex-col justify-center relative shrink-0 w-full">
        <p className="leading-[20px]">Pricing</p>
      </div>
    </div>
  );
}

function Frame117() {
  return (
    <div className="content-stretch flex flex-col gap-[24px] items-start relative shrink-0 w-[95px]">
      <div className="flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center leading-[0] relative shrink-0 text-[#fafafa] text-[18px] w-full">
        <p className="leading-[normal]">Navigation</p>
      </div>
      <Frame115 />
    </div>
  );
}

function Frame116() {
  return (
    <div className="content-stretch flex flex-col font-['Geist:Regular',sans-serif] font-normal gap-[16px] items-start leading-[0] relative shrink-0 text-[#a1a1a1] text-[16px]">
      <div className="flex flex-col justify-center relative shrink-0 w-full">
        <p className="leading-[20px]">Privacy</p>
      </div>
      <div className="flex flex-col justify-center relative shrink-0 w-full">
        <p className="leading-[20px]">Terms</p>
      </div>
    </div>
  );
}

function Frame118() {
  return (
    <div className="content-stretch flex flex-col gap-[24px] items-start relative shrink-0 w-[95px]">
      <div className="flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center leading-[0] min-w-full relative shrink-0 text-[#fafafa] text-[18px] w-[min-content]">
        <p className="leading-[normal]">Resources</p>
      </div>
      <Frame116 />
    </div>
  );
}

function Frame120() {
  return (
    <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0">
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#a1a1a1] text-[16px] w-full">
        <p className="leading-[20px]">LinkedIn</p>
      </div>
    </div>
  );
}

function Frame119() {
  return (
    <div className="content-stretch flex flex-col gap-[24px] items-start relative shrink-0 w-[95px]">
      <div className="flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center leading-[0] min-w-full relative shrink-0 text-[#fafafa] text-[18px] w-[min-content]">
        <p className="leading-[normal]">Connect</p>
      </div>
      <Frame120 />
    </div>
  );
}

function Frame121() {
  return (
    <div className="absolute content-stretch flex gap-[154px] items-start left-[780px] top-[9090px]">
      <Frame117 />
      <Frame118 />
      <Frame119 />
    </div>
  );
}

function HorizontalBorder() {
  return <div className="absolute border-[1px_0px_0px] border-[rgba(235,220,207,0.24)] border-solid h-[47px] left-[67px] right-[67px] top-[9380px]" data-name="HorizontalBorder" />;
}

function Frame88() {
  return (
    <div className="absolute bg-[#2c2c2c] content-stretch flex h-[52px] items-center justify-center left-[calc(50%-546.5px)] pl-[35px] pr-[28px] py-[19px] rounded-[8px] top-[9170.7px] translate-x-[-50%]">
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#edc29c] text-[16px] text-center text-nowrap">Join Waitlist →</p>
    </div>
  );
}

function Frame102() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-[calc(50%-2px)] px-[10px] py-[4px] rounded-[4px] top-[8497px] translate-x-[-50%]">
      <div aria-hidden="true" className="absolute border border-[#edc29c] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#edc29c] text-[15px] text-nowrap tracking-[1.95px]">SKENE.AI</p>
    </div>
  );
}

function Frame87() {
  return (
    <div className="absolute bg-[#2c2c2c] content-stretch flex h-[52px] items-center justify-center left-[calc(50%-1.5px)] pl-[35px] pr-[28px] py-[19px] rounded-[8px] top-[8705px] translate-x-[-50%]">
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#edc29c] text-[16px] text-center text-nowrap">Join Waitlist →</p>
    </div>
  );
}

function Group3() {
  return (
    <div className="absolute contents left-[calc(50%-2px)] top-[8497px] translate-x-[-50%]">
      <div className="absolute flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center leading-[0] left-[calc(50%-2px)] text-[#ebdccf] text-[48px] text-center top-[8577.5px] tracking-[-0.96px] translate-x-[-50%] translate-y-[-50%] w-[782px]">
        <p className="leading-[52.8px]">Product growth that drives itself</p>
      </div>
      <p className="absolute font-['Inter:Regular',sans-serif] font-normal leading-[normal] left-[calc(50%-1.5px)] not-italic text-[#ebdccf] text-[22px] text-center top-[8623px] translate-x-[-50%] w-[469px]">Keep the product moving without human intervention or overhead.</p>
      <Frame102 />
      <Frame87 />
    </div>
  );
}

function Svg16() {
  return (
    <div className="relative shrink-0 size-[15.151px]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 16 16">
        <g id="SVG">
          <path d={svgPaths.p37e34c80} id="Vector" stroke="var(--stroke-0, #EDC29C)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.2626" />
          <path d={svgPaths.p27e25d00} id="Vector_2" stroke="var(--stroke-0, #EDC29C)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.2626" />
        </g>
      </svg>
    </div>
  );
}

function Frame() {
  return (
    <div className="content-stretch flex gap-[7.102px] items-center relative shrink-0">
      <Svg16 />
      <div className="flex flex-col font-['Geist_Mono:Medium',sans-serif] font-medium justify-center leading-[0] relative shrink-0 text-[#edc29c] text-[14px] text-nowrap">
        <p className="leading-[normal]">Pay only on success</p>
      </div>
    </div>
  );
}

function Svg17() {
  return (
    <div className="relative shrink-0 size-[15.151px]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 16 16">
        <g id="SVG">
          <path d={svgPaths.p359f25f0} id="Vector" stroke="var(--stroke-0, #EDC29C)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.2626" />
          <path d={svgPaths.p2219bb00} id="Vector_2" stroke="var(--stroke-0, #EDC29C)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.2626" />
        </g>
      </svg>
    </div>
  );
}

function Frame1() {
  return (
    <div className="content-stretch flex gap-[7.102px] items-center relative shrink-0">
      <Svg17 />
      <div className="flex flex-col font-['Geist_Mono:Medium',sans-serif] font-medium justify-center leading-[0] relative shrink-0 text-[#edc29c] text-[14px] text-nowrap">
        <p className="leading-[normal]">Any codebase</p>
      </div>
    </div>
  );
}

function Svg18() {
  return (
    <div className="relative shrink-0 size-[15.151px]" data-name="SVG">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 16 16">
        <g id="SVG">
          <path d={svgPaths.p1129ea00} id="Vector" stroke="var(--stroke-0, #EDC29C)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.2626" />
          <path d={svgPaths.p1b3f9080} id="Vector_2" stroke="var(--stroke-0, #EDC29C)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.2626" />
        </g>
      </svg>
    </div>
  );
}

function Frame2() {
  return (
    <div className="content-stretch flex gap-[7.102px] items-center relative shrink-0">
      <Svg18 />
      <div className="flex flex-col font-['Geist_Mono:Medium',sans-serif] font-medium justify-center leading-[0] relative shrink-0 text-[#edc29c] text-[14px] text-nowrap">
        <p className="leading-[normal]">5-minute setup</p>
      </div>
    </div>
  );
}

function Frame64() {
  return (
    <div className="content-stretch flex gap-[35px] items-center relative shrink-0">
      <Frame />
      <Frame1 />
      <Frame2 />
    </div>
  );
}

function Frame5() {
  return (
    <div className="bg-[#2c2c2c] content-stretch flex h-[52px] items-center justify-center pl-[24px] pr-[20px] py-[19px] relative rounded-[8px] shrink-0 w-[245px]">
      <p className="font-['Geist_Mono:Medium',sans-serif] font-medium leading-[normal] relative shrink-0 text-[#edc29c] text-[16px] text-center text-nowrap">Try for free →</p>
    </div>
  );
}

function Frame114() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[45px] items-center left-[369px] top-[412.07px] w-[702.77px]">
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal h-[48.531px] justify-center leading-[29.119px] relative shrink-0 text-[#a1a1a1] text-[20px] text-center w-full">
        <p className="mb-0">Test onboarding, increase lifetime value, and guide users faster.</p>
        <p>With no overhead and no manual work.</p>
      </div>
      <Frame64 />
      <Frame5 />
    </div>
  );
}

function ArrowDropDown6() {
  return (
    <div className="absolute left-[1197px] size-[24px] top-[7679px]" data-name="arrow_drop_down">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="arrow_drop_down">
          <mask height="24" id="mask0_1_512" maskUnits="userSpaceOnUse" style={{ maskType: "alpha" }} width="24" x="0" y="0">
            <rect fill="var(--fill-0, #D9D9D9)" height="24" id="Bounding box" width="24" />
          </mask>
          <g mask="url(#mask0_1_512)">
            <path d={svgPaths.p1cbc5b80} fill="var(--fill-0, #060606)" id="arrow_drop_down_2" />
          </g>
        </g>
      </svg>
    </div>
  );
}

function Frame103() {
  return (
    <div className="absolute h-[828px] left-[31px] overflow-clip rounded-[10px] top-[7240px] w-[1376px]">
      <div className="absolute h-[1106px] left-0 top-[-155px] w-[1659px]" data-name="image 7">
        <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={imgImage7} />
      </div>
    </div>
  );
}

function Frame78() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-[67px] px-[10px] py-[4px] rounded-[4px] top-[61px]">
      <div aria-hidden="true" className="absolute border border-[#a1a1a1] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#2c2c2c] text-[15px] text-nowrap tracking-[1.95px]">ABOUT US</p>
    </div>
  );
}

function Frame6() {
  return (
    <div className="absolute bg-[#2c2c2c] content-stretch flex h-[52px] items-center justify-center left-[calc(50%-274.5px)] pl-[35px] pr-[28px] py-[19px] rounded-[8px] top-[347px] translate-x-[-50%]">
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#edc29c] text-[16px] text-center text-nowrap">Reach out to us →</p>
    </div>
  );
}

function Frame104() {
  return (
    <div className="absolute bg-[#faf1e9] h-[450px] left-[275px] overflow-clip rounded-[10px] top-[7810px] w-[910px]">
      <div className="absolute flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center leading-[0] left-[67px] text-[#2c2c2c] text-[40px] top-[153px] tracking-[-0.96px] translate-y-[-50%] w-[773px]">
        <p className="leading-[48px]">Customer Success is broken. It doesn’t scale — and every SaaS company knows it.</p>
      </div>
      <p className="absolute font-['Geist:Regular',sans-serif] font-normal leading-[26px] left-[67px] text-[#2c2c2c] text-[18px] top-[222px] w-[751px]">Skene is an AI-driven, outcome-first customer success platform with agents that truly understand your product. Instead of aggregating analytics, our agents analyze your codebase to learn how your software actually works — enabling them to act intelligently, automate customer success, and drive measurable results.</p>
      <Frame78 />
      <Frame6 />
    </div>
  );
}

function Group4() {
  return (
    <div className="absolute contents left-[calc(50%-1px)] top-[7240px] translate-x-[-50%]">
      <div className="absolute bg-[#faf1e9] h-[828px] left-[31px] rounded-[12px] top-[7240px] w-[1376px]" />
      <ArrowDropDown6 />
      <Frame103 />
      <Frame104 />
    </div>
  );
}

function Form14() {
  return <div className="backdrop-blur-[500px] backdrop-filter bg-[rgba(235,220,207,0.05)] h-[390px] rounded-[12.706px] shrink-0 w-[319px]" data-name="Form" />;
}

function Frame105() {
  return (
    <div className="content-stretch flex items-center justify-center px-[10px] py-[4px] relative rounded-[4px] shrink-0">
      <div aria-hidden="true" className="absolute border border-[#edc29c] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#edc29c] text-[12px] text-nowrap tracking-[1.56px] uppercase">Ilkka Vertanen</p>
    </div>
  );
}

function Frame60() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full">
      <Frame105 />
      <div className="flex flex-col font-['Geist_Mono:Light',sans-serif] font-light justify-center leading-[0] min-w-full relative shrink-0 text-[#a1a1a1] text-[11px] tracking-[1.76px] w-[min-content]">
        <p className="leading-[14px]">Sales and Marketing Director,Link Mobility</p>
      </div>
    </div>
  );
}

function Frame61() {
  return (
    <div className="basis-0 content-stretch flex flex-col grow items-start justify-between min-h-px min-w-px relative shrink-0 w-full">
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[19.6px] relative shrink-0 text-[#ecdccf] text-[16px] w-full">
        <p className="mb-0">{`"Our work with Skene was eye-opening.`}</p>
        <p className="mb-0">&nbsp;</p>
        <p>{`After the first session we have a better understanding of our customer success function, which tasks are draining energy and how to improve things next."`}</p>
      </div>
      <Frame60 />
    </div>
  );
}

function Form15() {
  return (
    <div className="backdrop-blur-[500px] backdrop-filter bg-[rgba(235,220,207,0.05)] content-stretch flex flex-col h-[390px] items-start justify-between pb-[24px] pt-[32px] px-[24px] relative rounded-[12.706px] shrink-0 w-[319px]" data-name="Form">
      <Frame61 />
    </div>
  );
}

function Frame106() {
  return (
    <div className="content-stretch flex items-center justify-center px-[10px] py-[4px] relative rounded-[4px] shrink-0">
      <div aria-hidden="true" className="absolute border border-[#edc29c] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#edc29c] text-[12px] text-nowrap tracking-[1.56px] uppercase">Anna Harris</p>
    </div>
  );
}

function Frame62() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full">
      <Frame106 />
      <div className="flex flex-col font-['Geist_Mono:Light',sans-serif] font-light justify-center leading-[14px] min-w-full relative shrink-0 text-[#a1a1a1] text-[11px] tracking-[1.76px] w-[min-content]">
        <p className="mb-0">Chief Growth Officer,</p>
        <p>Shen.ai</p>
      </div>
    </div>
  );
}

function Frame63() {
  return (
    <div className="basis-0 content-stretch flex flex-col grow items-start justify-between min-h-px min-w-px relative shrink-0 w-full">
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[19.6px] relative shrink-0 text-[#ecdccf] text-[16px] w-full">
        <p className="mb-0">{`"Our work with Skene came at exactly the right time, as we're in the middle of building our customer success function. It gave us clarity on the jobs to be done and revealed blind spots we hadn't seen before.`}</p>
        <p className="mb-0">&nbsp;</p>
        <p>{`What we valued most was the chance to pause, step back, and look at the process holistically - something that's often hard to do in the middle of fast execution."`}</p>
      </div>
      <Frame62 />
    </div>
  );
}

function Form16() {
  return (
    <div className="backdrop-blur-[500px] backdrop-filter bg-[rgba(235,220,207,0.05)] content-stretch flex flex-col h-[390px] items-start justify-between pb-[24px] pt-[32px] px-[24px] relative rounded-[12.706px] shrink-0 w-[319px]" data-name="Form">
      <Frame63 />
    </div>
  );
}

function Frame107() {
  return (
    <div className="content-stretch flex items-center justify-center px-[10px] py-[4px] relative rounded-[4px] shrink-0">
      <div aria-hidden="true" className="absolute border border-[#edc29c] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#edc29c] text-[12px] text-nowrap tracking-[1.56px] uppercase">Kalle Harjunpää</p>
    </div>
  );
}

function Frame70() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full">
      <Frame107 />
      <div className="flex flex-col font-['Geist_Mono:Light',sans-serif] font-light justify-center leading-[14px] min-w-full relative shrink-0 text-[#a1a1a1] text-[11px] tracking-[1.76px] w-[min-content]">
        <p className="mb-0">Country Manager,</p>
        <p>Linear</p>
      </div>
    </div>
  );
}

function Frame71() {
  return (
    <div className="basis-0 content-stretch flex flex-col grow items-start justify-between min-h-px min-w-px relative shrink-0 w-full">
      <div className="flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[19.6px] relative shrink-0 text-[#ecdccf] text-[16px] w-full">
        <p className="mb-0">{`"Our work with Skene came at exactly the right time, as we're in the middle of building our customer success function. It gave us clarity on the jobs to be done and revealed blind spots we hadn't seen before.`}</p>
        <p className="mb-0">&nbsp;</p>
        <p>{`What we valued most was the chance to pause, step back, and look at the process holistically - something that's often hard to do in the middle of fast execution."`}</p>
      </div>
      <Frame70 />
    </div>
  );
}

function Form17() {
  return (
    <div className="backdrop-blur-[500px] backdrop-filter bg-[rgba(235,220,207,0.05)] content-stretch flex flex-col h-[390px] items-start justify-between pb-[24px] pt-[32px] px-[24px] relative rounded-[12.706px] shrink-0 w-[319px]" data-name="Form">
      <Frame71 />
    </div>
  );
}

function Paragraph2() {
  return (
    <div className="absolute content-stretch flex gap-[24px] h-[415px] items-center left-[calc(50%+0.5px)] top-[227px] translate-x-[-50%]" data-name="Paragraph">
      <Form14 />
      <Form15 />
      <Form16 />
      <Form17 />
      <Form14 />
    </div>
  );
}

function Group5() {
  return (
    <div className="absolute contents left-[-157px] top-0">
      <div className="absolute h-[754px] left-0 rounded-[12px] top-0 w-[1376px]" />
      <Paragraph2 />
    </div>
  );
}

function Frame108() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-1/2 px-[10px] py-[4px] rounded-[4px] top-[100px] translate-x-[-50%]">
      <div aria-hidden="true" className="absolute border border-[#edc29c] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#edc29c] text-[12px] text-nowrap tracking-[1.56px] uppercase">WHAT THEY SAY ABOUT US</p>
    </div>
  );
}

function Frame93() {
  return (
    <div className="absolute bg-[#161616] h-[754px] left-1/2 overflow-clip rounded-[16px] top-[5710px] translate-x-[-50%] w-[1376px]">
      <Group5 />
      <div className="absolute flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center leading-[0] left-1/2 text-[#ebdccf] text-[48px] text-center top-[166.5px] tracking-[-0.96px] translate-x-[-50%] translate-y-[-50%] w-[460px]">
        <p className="leading-[52.8px]">See the impact</p>
      </div>
      <Frame108 />
      <div className="absolute bg-gradient-to-r from-[rgba(22,22,22,0)] h-[415px] left-[1191px] to-[#161616] to-[62.694%] top-[227px] w-[185px]" />
      <div className="absolute flex h-[415px] items-center justify-center left-0 top-[227px] w-[186px]">
        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
          <div className="bg-gradient-to-r from-[rgba(22,22,22,0)] h-[415px] to-[#161616] to-[62.694%] w-[186px]" />
        </div>
      </div>
    </div>
  );
}

function Frame109() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-[calc(50%+0.5px)] px-[10px] py-[4px] rounded-[4px] top-[90px] translate-x-[-50%]">
      <div aria-hidden="true" className="absolute border border-[#a1a1a1] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#faf1e9] text-[12px] text-nowrap tracking-[1.56px]">FEATURES</p>
    </div>
  );
}

function Frame79() {
  return (
    <div className="absolute bg-[#edc29c] content-stretch flex items-center justify-center left-[307px] px-[10px] py-[4px] rounded-[4px] top-[345px]">
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#2c2c2c] text-[15px] text-nowrap tracking-[1.95px] uppercase">Automated onboarding</p>
    </div>
  );
}

function Frame110() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-[241px] px-[10px] py-[4px] rounded-[4px] top-[416px]">
      <div aria-hidden="true" className="absolute border border-[#a1a1a1] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="font-['Geist_Mono:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[#faf1e9] text-[15px] text-nowrap tracking-[1.95px] uppercase">Customer success analytics</p>
    </div>
  );
}

function Frame111() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-[307px] opacity-40 px-[10px] py-[4px] rounded-[4px] top-[487px]">
      <div aria-hidden="true" className="absolute border border-[#a1a1a1] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="bg-clip-text bg-gradient-to-b font-['Geist_Mono:Regular',sans-serif] font-normal from-[#a1a1a1] leading-[normal] relative shrink-0 text-[15px] text-nowrap to-[#3b3b3b] tracking-[1.95px] uppercase" style={{ WebkitTextFillColor: "transparent" }}>
        Lifecycle automation
      </p>
    </div>
  );
}

function Frame112() {
  return (
    <div className="absolute content-stretch flex items-center justify-center left-[405px] opacity-40 px-[10px] py-[4px] rounded-[4px] top-[558px]">
      <div aria-hidden="true" className="absolute border border-[#a1a1a1] border-solid inset-0 pointer-events-none rounded-[4px]" />
      <p className="bg-clip-text bg-gradient-to-b font-['Geist_Mono:Regular',sans-serif] font-normal from-[#a1a1a1] leading-[normal] relative shrink-0 text-[15px] text-nowrap to-[#3b3b3b] tracking-[1.95px] uppercase" style={{ WebkitTextFillColor: "transparent" }}>
        Team access
      </p>
    </div>
  );
}

function Frame7() {
  return (
    <div className="absolute content-stretch flex h-[52px] items-center justify-center left-[651px] pl-[35px] pr-[28px] py-[19px] rounded-[8px] top-[544px] w-[187px]">
      <div aria-hidden="true" className="absolute border border-[#edc29c] border-solid inset-0 pointer-events-none rounded-[8px]" />
      <p className="font-['Geist_Mono:Medium',sans-serif] font-medium leading-[normal] relative shrink-0 text-[#edc29c] text-[16px] text-center text-nowrap">See more →</p>
    </div>
  );
}

function Frame113() {
  return (
    <div className="absolute bg-gradient-to-b from-[#060606] h-[780px] left-0 rounded-[16px] to-[#151515] to-[84.935%] top-0 via-[#151515] via-[18.402%] w-[1376px]">
      <div className="absolute flex h-[300px] items-center justify-center left-[calc(50%-538px)] top-0 translate-x-[-50%] w-0" style={{ "--transform-inner-width": "0", "--transform-inner-height": "0" } as React.CSSProperties}>
        <div className="flex-none rotate-[270deg] scale-y-[-100%]">
          <div className="h-0 relative w-[300px]">
            <div className="absolute inset-[-0.5px_0]">
              <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 300 1">
                <path d={svgPaths.p154c2600} id="Line 58" stroke="var(--stroke-0, #A1A1A1)" />
              </svg>
            </div>
          </div>
        </div>
      </div>
      <p className="absolute font-['Geist:Medium',sans-serif] font-medium leading-[normal] left-[calc(50%-1px)] text-[#faf1e9] text-[48px] text-center text-nowrap top-[130px] translate-x-[-50%]">
        <span>{`What you get with `}</span>
        <span className="text-[#edc29c]">Skene.ai</span>
      </p>
      <Frame109 />
      <Frame79 />
      <Frame110 />
      <Frame111 />
      <Frame112 />
      <div className="absolute flex flex-col font-['Geist_Mono:Regular',sans-serif] font-normal justify-center leading-[0] left-[calc(50%-144px)] text-[10px] text-[rgba(250,241,233,0.5)] text-nowrap text-right top-[473.5px] translate-x-[-100%] translate-y-[-50%]">
        <p className="leading-[23px]">Coming soon</p>
      </div>
      <div className="absolute flex flex-col font-['Geist_Mono:Regular',sans-serif] font-normal justify-center leading-[0] left-[calc(50%-144px)] text-[10px] text-[rgba(250,241,233,0.5)] text-nowrap text-right top-[544.5px] translate-x-[-100%] translate-y-[-50%]">
        <p className="leading-[23px]">Coming soon</p>
      </div>
      <div className="absolute flex flex-col font-['Geist:Regular',sans-serif] font-normal justify-center leading-[0] left-[calc(50%-0.5px)] text-[#faf1e9] text-[18px] text-center text-nowrap top-[221.5px] translate-x-[-50%] translate-y-[-50%]">
        <p className="leading-[23px]">Outcome-first customer success AI agents that truly understand your product</p>
      </div>
      <p className="absolute font-['Geist:Medium',sans-serif] font-medium leading-[normal] left-[651px] text-[#faf1e9] text-[36px] top-[332px] w-[574px]">Onboarding Powered by Your Personal Codebase</p>
      <p className="absolute font-['Inter:Regular',sans-serif] font-normal leading-[28px] left-[651px] not-italic text-[#faf1e9] text-[18px] top-[438px] w-[574px]">{`Your codebase becomes your onboarding documentation. No brittle CSS selectors. No manual tours to maintain. Users reach their "aha moment" in minutes, not days.`}</p>
      <Frame7 />
    </div>
  );
}

function Group6() {
  return (
    <div className="absolute contents left-0 top-0">
      <div className="absolute bg-[#21201e] h-[713.738px] left-0 rounded-[12px] top-0 w-[1376px]" />
      <Frame113 />
    </div>
  );
}

function Frame92() {
  return (
    <div className="absolute h-[780px] left-1/2 overflow-clip top-[1417px] translate-x-[-50%] w-[1376px]">
      <Group6 />
    </div>
  );
}

export default function LandingPage() {
  return (
    <div className="relative size-full" data-name="Landing page" style={{ backgroundImage: "linear-gradient(rgba(6, 6, 6, 0) 8.1862%, rgb(6, 6, 6) 10.355%), linear-gradient(90deg, rgb(6, 6, 6) 0%, rgb(6, 6, 6) 100%)" }}>
      <div className="absolute h-[1128px] left-[-10px] top-0 w-[1440px]">
        <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
          <div className="absolute bg-[#060606] inset-0" />
          <div className="absolute inset-0 overflow-hidden">
            <img alt="" className="absolute h-[116.52%] left-[13.27%] max-w-none top-[-15.04%] w-full" src={imgRectangle16} />
          </div>
          <div className="absolute inset-0" style={{ backgroundImage: "linear-gradient(-9.83357deg, rgb(6, 6, 6) 35.445%, rgba(6, 6, 6, 0) 46.661%)" }} />
        </div>
      </div>
      <div className="absolute h-[1244.334px] left-[-74px] top-[8183px] w-[1588.511px]">
        <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
          <div className="absolute bg-[#060606] inset-0" />
          <div className="absolute inset-0 overflow-hidden">
            <img alt="" className="absolute h-[116.52%] left-[13.27%] max-w-none top-[-15.04%] w-full" src={imgRectangle16} />
          </div>
          <div className="absolute bg-gradient-to-b from-[70.301%] from-[rgba(6,6,6,0)] inset-0 to-[#060606] to-[89.805%]" />
        </div>
      </div>
      <Frame94 />
      <div className="absolute flex h-[1244.334px] items-center justify-center left-[-74px] top-[6939px] w-[1588.511px]">
        <div className="flex-none scale-y-[-100%]">
          <div className="h-[1244.334px] relative w-[1588.511px]">
            <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
              <div className="absolute bg-[#060606] inset-0" />
              <div className="absolute inset-0 overflow-hidden">
                <img alt="" className="absolute h-[116.52%] left-[13.27%] max-w-none top-[-15.04%] w-full" src={imgRectangle16} />
              </div>
              <div className="absolute bg-gradient-to-b from-[70.301%] from-[rgba(6,6,6,0)] inset-0 to-[#060606] to-[89.805%]" />
            </div>
          </div>
        </div>
      </div>
      <div className="absolute backdrop-blur-[25px] backdrop-filter bg-[rgba(6,6,6,0.04)] h-[896px] left-[33px] top-[3867px] w-[1375px]" />
      <div className="absolute backdrop-blur-[25px] backdrop-filter bg-[rgba(6,6,6,0.04)] h-[819px] left-[33px] top-[2220px] w-[1375px]" />
      <div className="absolute bg-gradient-to-b from-[rgba(6,6,6,0)] h-[528px] left-0 to-[#060606] to-[32.576%] top-[808px] w-[1440px]" />
      <Frame69 />
      <div className="absolute flex flex-col font-['Geist:Medium',sans-serif] font-medium h-[104.342px] justify-center leading-[0] left-[calc(50%+1.34px)] text-[#ebdccf] text-[67.682px] text-center top-[305.58px] tracking-[-1.3536px] translate-x-[-50%] translate-y-[-50%] w-[650.025px]">
        <p className="leading-[74.732px]">
          <span>{`Unlock faster product-led `}</span>
          <span className="text-[#edc29c]">growth</span>
        </p>
      </div>
      <Frame80 />
      <Frame81 />
      <Frame85 />
      <Group />
      <Frame66 />
      <Frame100 />
      <Frame101 />
      <Form9 />
      <Form10 />
      <Form11 />
      <Form12 />
      <Form13 />
      <Frame59 />
      <div className="absolute bg-gradient-to-r from-[rgba(6,6,6,0)] h-[302px] left-[1055px] to-[#060606] to-[62.694%] top-[2576px] w-[385px]" />
      <div className="absolute flex h-[302px] items-center justify-center left-0 top-[2576px] w-[404px]">
        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
          <div className="bg-gradient-to-r from-[rgba(6,6,6,0)] h-[302px] to-[#060606] to-[62.694%] w-[404px]" />
        </div>
      </div>
      <SvgSkeneLogo1 />
      <div className="absolute flex flex-col font-['Inter:Bold',sans-serif] font-bold h-[35.219px] justify-center leading-[0] left-[107.23px] not-italic text-[#fafafa] text-[24.15px] top-[9346.09px] translate-y-[-50%] w-[73.973px]">
        <p className="leading-[35.219px]">Skene</p>
      </div>
      <div className="absolute flex flex-col font-['Geist:Medium',sans-serif] font-medium justify-center leading-[0] left-[67.2px] text-[#ebdccf] text-[32px] top-[9110.7px] translate-y-[-50%] w-[420px]">
        <p className="leading-[normal]">AI-powered onboarding that adapts to your product</p>
      </div>
      <Frame121 />
      <HorizontalBorder />
      <div className="absolute flex flex-col font-['Geist:Regular',sans-serif] font-normal h-[20px] justify-center leading-[0] left-[calc(50%+551.93px)] text-[#a1a1a1] text-[13px] text-center top-[9351px] translate-x-[-50%] translate-y-[-50%] w-[211.87px]">
        <p className="leading-[20px]">© 2025 Skene. All rights reserved.</p>
      </div>
      <Frame88 />
      <Group3 />
      <Frame114 />
      <Group4 />
      <Frame93 />
      <Frame92 />
    </div>
  );
}